<template>
  <input type="text" autocomplete="off" v-model="slogan">
  <h1 v-text="slogan"></h1>
  <input type="text" autocomplete="off" :value="slogan" @input="inputValue">
  <h3>单选按钮</h3>
  性别：&nbsp;&nbsp;
  <label for="male">
    男：<input type="radio" name="gender" value="1" v-model="gender" id="male">
  </label>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <label for="female">
    女：<input type="radio" name="gender" value="0" v-model="gender" id="female">
  </label>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span v-text="gender"></span>
  <br>
  <label for="remember">
    <input type="checkbox" name="remember" v-model="checked" id="remember">
    &nbsp;&nbsp;记住我：&nbsp;&nbsp;
    <span v-text="checked"></span>
  </label>
  <h3>多选按钮</h3>
  爱好：&nbsp;&nbsp;
  <label for="swimming">游泳</label>
  <input type="checkbox" id="swimming" name="hobby" value="swimming" v-model="hobbies">
  &nbsp;&nbsp;&nbsp;&nbsp;
  <label for="running">跑步</label>
  <input type="checkbox" id="running" name="hobby" value="running" v-model="hobbies">
  &nbsp;&nbsp;&nbsp;&nbsp;
  <label for="skiing">滑雪</label>
  <input type="checkbox" id="skiing" name="hobby" value="skiing" v-model="hobbies">
  <br>
  <span v-for="hobby in hobbies" :key="hobby">
    &nbsp;&nbsp;&nbsp;&nbsp;<span v-text="hobby"></span>
  </span>
  <h3>单选下拉列表</h3>
  籍贯：&nbsp;&nbsp;
  <select name="hometown" id="hometown" v-model="hometown">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="jilin">吉林</option>
  </select>
  &nbsp;&nbsp;
  <span v-text="hometown"></span>
  <h3>多选下拉列表</h3>
  水果：&nbsp;&nbsp;
  <select name="fruits" id="fruits" multiple v-model="fruits">
    <option value="banana">香蕉</option>
    <option value="apple">苹果</option>
    <option value="pear">梨</option>
  </select>
  <div v-text="fruits"></div>
  <span v-for="fruit in fruits" :key="fruit">
    &nbsp;&nbsp;&nbsp;&nbsp;<span v-text="fruit"></span>
  </span>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      slogan: '桃李不言下自成蹊',
      gender: 1,
      checked: true,
      hobbies: ["swimming", "skiing"],
      hometown: 'jilin',
      fruits:['pear']
    }
  },
  methods: {
    inputValue(e) {
      console.log(e.target.value);
      this.slogan = e.target.value;
    }
  },
  watch: {
    hobbies(newValue, oldValue) {
      console.log(`newValue >>> ${newValue} \t oldValue >>> ${oldValue}`)
    }
  }
}
</script>

<style>

ul > li {
  list-style: none;
}

.box {
  border-radius: 50%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
